<template>
  <div class="lblock-root">
    <div class="head">
      <div class="title">{{data.title}}</div>
      <div class="numtext">共<span class="num">{{data.total}}</span>条记录</div>    
    </div>
    <div class="list innerscr">
      <div v-for="item in data.data" class="listItem">
        <router-link to="detail" class="title" :class="{hot: item.hot}" tag="div">{{item.title}}<img src="../Home/img/fire.png" v-if="item.hot" class="hot"></router-link>
        <div class="content">{{item.content}}</div>
        <div class="cline">
          <div class="label">涉及人物：</div>
          <div class="cont">{{item.person}}</div>
        </div>
        <div class="cline">
          <div class="label">发生地点：</div>
          <div class="cont">{{item.location}}</div>
        </div>
        <div class="date">{{item.date}}</div>
      </div>
    </div>
    <router-link class="more" to="/eventlist">更多...</router-link>
  </div>
</template>

<script>
export default{
  name: 'lblock',
  data(){
    return {
      data: {}
    }
  },
  mounted(){
    fetch('/static/data-eventlist.json').then(r=>r.json()).then(data=>{
      this.data = data;
    })
  }
}
</script>

<style scoped lang="stylus">
.lblock-root
  padding 16px 20px
  box-sizing border-box
  >.head
    display flex
    justify-content space-between
    align-items flex-end
    margin-bottom 24px
    >.title
      font-size 24px
    >.numtext
      font-size 12px
      padding-right 28px
      >.num
        color #d40909
  >.list
    height 370px
    overflow auto
    margin-bottom 15px
    padding-right 20px
  >.more
    font-size 12px
    float right
    padding-right 28px
    color #59b3ff
    text-decoration none

.listItem
  margin-bottom 5px
  font-size 12px
  >.title
    font-size 16px
    color #59b3ff
    margin-bottom 6px
    cursor pointer
    &.hot
      color #c10809
    >.hot
      height 14px
      margin-left 12px
      vertical-align -1px
  >.content
    line-height 22px
  >.cline
    line-height 22px
    display flex
    white-space nowrap
    >.label
      color #8dccfd
    >.content
      overflow hidden
      text-overflow ellipsis
      width 365px
  >.date
    margin-top -8px
    font-family consolas
    color #8dccfd
    letter-spacing 1px
    text-align right

</style>